<template>
  <div class="service-mangement">
    <div class="top">
      <div class="blue"></div>
      待处理服务
    </div>
    <div class="My_option">
      <div class="option_">
        <div class="service-status">
          服务状态<el-select
            v-model="servicevalue"
            class="m-2"
            placeholder="请选择"
            @change="handleservice"
          >
            <el-option
              v-for="item in ServiceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="contractor">
          签约机构<el-select
            v-model="institutions"
            class="m-2"
            placeholder="请选择"
          >
            <el-option
              v-for="item in contractor"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="doctor-team">
          医生团队<el-select v-model="team" class="m-2" placeholder="请选择">
            <el-option
              v-for="item in team"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="new-export">
        <el-button type="primary" size="large" @click="handleAdd"
          >新增服务</el-button
        >
        <el-button plain @click="handleExport">导出</el-button>
      </div>
    </div>
    <div class="choose_time_search">
      <div class="service-status">
        服务状态<el-select v-model="Services" class="m-2" placeholder="请选择">
          <el-option
            v-for="item in Service"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="block">
        <span class="demonstration">预选日期</span>
        <el-date-picker
          v-model="times"
          type="datetimerange"
          start-placeholder="请选择日期"
          end-placeholder="请选择日期"
        />
      </div>
      <div class="search">
        <el-input
          v-model="searchvalue"
          class="w-50 m-2"
          placeholder="请输入关键字"
        >
          <template #prefix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input>
      </div>
    </div>
    <div class="table_form">
      <el-table :data="user" stripe style="width: 97%" height="500px">
        <el-table-column type="selection" width="40" />
        <el-table-column
          prop="id"
          label="编号"
          width="90"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="username"
          label="姓名"
          width="90"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="Idcard"
          label="身份证号"
          width="190"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="phone"
          label="手机号"
          width="120"
          :show-overflow-tooltip="true"
        />
        <el-table-column prop="state" label="服务状态" width="90" />
        <el-table-column prop="service" label="服务包" width="140" />
        <el-table-column prop="project" label="服务项目" width="120" />
        <el-table-column prop="createdAt" label="申请时间" width="180" />
        <!-- <el-table-column label="test" width="220" /> -->
        <el-table-column fixed="right" label="操作" width="170">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="handleClick(scope.row.id, 'find')"
              >查看详情</el-button
            >
            <el-button
              link
              type="success"
              size="small"
              @click="handleClick(scope.row.id, 'edit')"
              >编辑</el-button
            >
            <el-button
              link
              type="danger"
              size="small"
              @click="handleremove(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="paging">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="this.total"
        @current-change="handlepage"
      />
    </div>
  </div>
</template>

<script>
import { ElMessageBox, ElMessage } from "element-plus";
// import { utils, writeFileXLSX } from 'xlsx'
import { Timeformatting } from "../../common/common";
import { findUsers, removeUser } from "@/api/user";
export default {
  name: "ServiceManagement",

  times: "",
  data() {
    return {
      user: [],
      useradditional: [
        {
          Idcard: "511xxxxxxxxxxxxxxxx234",
          state: ["待审核", "已驳回", "待服务"][Math.floor(Math.random() * 3)],
          service: ["老年人服务包", "0-6岁儿童服务包", "慢性病服务包"][
            Math.floor(Math.random() * 3)
          ],
          project: ["高血压随访", "心脏病检查", "胆固醇检查"][
            Math.floor(Math.random() * 3)
          ],
        },
      ],
      total: 0,
      page: 1,
      pageSize: 10,
      times: "",
      servicevalue: "",
      institutions: "",
      team: "",
      Services: "",
      searchvalue: "",
      ServiceOptions: [
        {
          value: "待审核",
          label: "待审核",
        },
        {
          value: "待服务",
          label: "待服务",
        },
        {
          value: "已驳回",
          label: "已驳回",
        },
      ],
      contractor: [
        {
          value: "罗西社区服务中心",
          label: "罗西社区服务中心",
        },
        {
          value: "天明社区服务中心",
          label: "天明社区服务中心",
        },
        {
          value: "民进社区服务中心",
          label: "民进社区服务中心",
        },
      ],
      team: [
        {
          value: "杨兵团队",
          label: "杨兵团队",
        },
        {
          value: "小虎团队",
          label: "小虎团队",
        },
        {
          value: "胡歌团队",
          label: "胡歌团队",
        },
      ],
      Service: [
        {
          value: "0-6岁儿童服务包",
          label: "0-6岁儿童服务包",
        },
        {
          value: "老年人服务包",
          label: "老年人服务包",
        },
        {
          value: "慢性病服务包",
          label: "慢性病服务包",
        },
      ],
    };
  },
  async created() {
    const result = await findUsers();
    // console.log("list:", result.list);
    this.user = Timeformatting(result.list);
    // console.log("user:", this.user);
    this.total = result.total;
    this.page = result.page;
    this.pageSize = result.pageSize;
  },
  computed: {},
  methods: {
    handleClick(id, action) {
      // console.log(id);
      this.$router.push({
        path: "details-service",
        query: {
          id,
          action,
        },
      });
    },
    handleAdd() {
      this.$router.push("add-service");
    },
    handleservice() {
      // console.log(this.servicevalue);
    },

    /***
     *  删除功能
     */
    handleremove(id) {
      ElMessageBox.confirm("确认删除当前数据?", "删除提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          async function remove() {
            await removeUser(id);
            ElMessage.success("删除成功!");
          }
          remove();
          // console.log("删除...");
        })
        .catch(() => {
          // console.log("cancel");
        });
    },

    /***
     *  分页功能
     */
    async handlepage(currentPage) {
      this.page = currentPage;
      const result = await findUsers({
        page: currentPage,
        pageSize: this.pageSize,
      });
      // const user = result.list.map((item) => {
      //   return item
      // })
      this.user = Timeformatting(result.list);
      this.total = result.total;
      this.page = result.page;
      this.pageSize = result.pageSize;
    },

    /**
     *  导出Export
     */
    handleExport() {
      const data = [
        { username: "用户名", nickname: "昵称", sex: "性别" },
        ...this.user,
      ];
      // console.log(data)

      // 将要导出的数据转换为工作表数据
      const ws = utils.json_to_sheet(data);
      // 新建工作簿
      const wb = utils.book_new();
      // 工作簿中追加工作表
      utils.book_append_sheet(wb, ws, "会员信息");
      // 将内存中保存的工作簿写入文件
      writeFileXLSX(wb, `会员信息-${new Date().toISOString()}.xlsx`);
    },
  },
};
</script>

<style lang="less" scoped>
.service-mangement {
  overflow: hidden;
}
.top {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 22px;
  margin-top: 10px;
  .blue {
    width: 6px;
    height: 26px;
    border-radius: 10px;
    background: blue;
    margin: 0 15px;
  }
}
.My_option {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  .option_ {
    width: 900px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    font-size: 14px;
    color: rgb(138, 133, 133);
    > .service-status {
      width: 300px;
      height: 50px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    > .contractor {
      width: 300px;
      height: 50px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    > .doctor-team {
      width: 300px;
      height: 50px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }
  .new-export {
    width: 200px;
    height: 50px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
}
.choose_time_search {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  > .service-status {
    width: 300px;
    height: 50px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 14px;
    color: rgb(138, 133, 133);
  }
  > .block {
    width: 550px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: rgb(138, 133, 133);
    > span {
      margin: 0 10px;
    }
  }
  > .search {
    width: 250px;
    height: 50px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  > .box {
    width: 100%;
    height: 200px;
    background: red;
  }
  // > .table_form {
  //   width: 100%;
  //   height: 600px;
  //   background: red;
  //   overflow: hidden;
  // }
}
.table_form {
  width: 100%;
  height: 500px;
  margin-top: 20px;
}
.paging {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
